<template>
	<view class="flex-col homepage">
		<view class="flex-col wrapper" v-for="(j,index) in Maintenance1" :key="index" @click="gouto(j)">
			<view class="flex-row wraper-row">
				<view class="u-line-1 text">{{j.theTitle}}</view>
				<view class="box" v-if="j.maintenanceProcess==='已提交'">已提交</view>
				<view class="box1" v-if="j.maintenanceProcess==='审核中'">审核中</view>
				<view class="box2" v-if="j.maintenanceProcess==='审核通过'">审核通过</view>
				<view class="box3" v-if="j.maintenanceProcess==='审核失败'">审核失败</view>
			</view>
			<view class="flex-col wraper-row-two">
				<view class="flex-row box-two">
					<view class="u-line-1 text-two">报修房屋</view>
					<view class="u-line-1 text-three">{{j.address}}</view>
				</view>
				<view class="flex-row box-three">
					<view class="u-line-1 text-four">报修项目</view>
					<view class="u-line-1 text-five">{{j.theProjectName}}</view>
				</view>
				<view class="flex-row box-four">
					<view class="u-line-1 text-six">预约日期</view>
					<view class="u-line-1 text-seven">{{j.appointmentTime}}</view>
				</view>
			</view>
		</view>
		<u-button class="button" @click="addMaintenance">
			+ 申请维修
		</u-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				Maintenance1: {},
				user:{}
			}
		},
		onLoad() {
			this.ListAll()
		},
		methods: {
			addMaintenance(){
				uni.navigateTo({
					url: '/pages/gwb/AddmainTenance'
				})
			},
			gouto(j) {
				uni.navigateTo({
					url: '/pages/gwb/maintenanceXq?j=' + JSON.stringify(j)
				})
			},
			ListAll() {
				this.user = uni.getStorageSync('user')
				this.$axios({
					url: 'serverwg/gwb/Maintenance',
					data: {
						id: this.user.userId,
					},
					method: 'GET',
					success: (res) => {
						this.Maintenance1 = res.data.data.Maintenance
						console.log(this.Maintenance1)
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 68rpx 30rpx 900rpx 30rpx;
		background-color: #dbf1e1;

		.wrapper {
			width: 100%;
			margin-bottom: 50rpx;
			padding: 46rpx 0rpx 62rpx 20rpx;
			border-width: 2rpx;
			border-style: solid;
			border-color: rgba(226, 226, 226, 1);
			background-color: #f3f4f6;

			.wraper-row {
				width: 631rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 28rpx 2rpx;
				padding-right: 1rpx;

				.text {
					width: 352rpx;
					margin-top: 6rpx;
					font-size: 30rpx;
					font-weight: 600;
					color: rgba(69, 69, 69, 1);
				}

				.box {
					width: 130rpx;
					height: 50rpx;
					background: #dbf1e1;
					text-align: center;
					line-height: 50rpx;
					color: #18b566;
				}

				.box1 {
					width: 130rpx;
					height: 50rpx;
					background: #fdf6ec;
					text-align: center;
					line-height: 50rpx;
					color: #f29100;
				}

				.box2 {
					width: 130rpx;
					height: 50rpx;
					background: #f4f4f5;
					text-align: center;
					line-height: 50rpx;
					color: #82848a;
				}

				.box3 {
					width: 130rpx;
					height: 50rpx;
					background: #fef0f0;
					text-align: center;
					line-height: 50rpx;
					color: #dd6161;
				}
			}

			.wraper-row-two {
				width: 634rpx;
				padding: 27rpx 0rpx 28rpx 4rpx;
				border-color: #c8c9cc;
				border-top-width: 1rpx;
				border-top-style: solid;
				border-bottom-width: 1rpx;
				border-bottom-style: solid;

				.box-two {
					width: 544rpx;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.text-two {
						width: 132rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(174, 174, 174, 1);
					}

					.text-three {
						width: 400rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(122, 122, 122, 1);
					}
				}

				.box-three {
					width: 544rpx;
					justify-content: space-between;
					margin-bottom: 22rpx;

					.text-four {
						width: 132rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(174, 174, 174, 1);
					}

					.text-five {
						width: 400rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(122, 122, 122, 1);
					}
				}

				.box-four {
					width: 537rpx;
					justify-content: space-between;
					padding-right: 1rpx;

					.text-six {
						width: 132rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(174, 174, 174, 1);
					}

					.text-seven {
						width: 400rpx;
						font-size: 28rpx;
						font-weight: 600;

						color: rgba(122, 122, 122, 1);
					}
				}
			}
		}

		.button {
			width: 100%;
			height: 82rpx;
			font-size: 32rpx;
			background: rgba(0, 114, 235, 1);
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>
